<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html>
<html lang="zh-CN">
  
<head>
  
  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  
</head>
<body>

  <div class="page-group">
    <div class="page page-current" style="background: #fff;">
    
      <header class="bar bar-nav fs-header-small fs-header-small appoint-header" style="text-align: center;">
        <a href="${ctx.host}/profile/courses/${courseRound.id}/appointment?site=${currentSite.id}&day=<fmt:formatDate value="${currentDay}" pattern="yyyy-MM-dd"/>" class="icon icon-left pull-left"></a>
        <h1 class="title">教练信息</h1>
      </header>
      
      <div class="content">
        <form class="coach-form" action="${ctx.host}/profile/courses/${courseRound.id}/appointment?scheduleId=${param.scheduleId}" method="POST">
        
          <input type="hidden" name="roundId" value="${courseRound.id}">
          <input type="hidden" name="siteId" value="${currentSite.id}">
          <input type="hidden" name="day" value="<fmt:formatDate value="${currentDay}" pattern="yyyy-MM-dd"/>">
          <input type="hidden" name="coachId" value="${coach.id}">
          <input type="hidden" name="areaType" value="${fn:length(currentSite.roomLimit.limit) == 1 ? currentSite.roomLimit.limit[0] : ''}">
          <input type="hidden" name="hour" value="">
          
          <div class="content-block coach-appointment no-margin">
            <div class="coach-cover">
              <img src="${cloud.prod}/${coach.profile.avatar}" class="protrait">
              <div class="coach-details">${coach.name}<br/>
                <span style="font-size: .6rem;">
                  <c:forEach var="specialty" items="${coach.profile.specialtyArray}" varStatus="status">
                    &nbsp;&nbsp;<span class="coach-specilty coach-specilty-${status.index}">${specialty}</span>
                  </c:forEach>
                </span>
              </div>
            </div>
            <div class="coach-description">${coach.profile.description}</div>
          </div>
          
          <div class="buttons-tab appoint-tab appoint-scroll" style="position: static;">
            <c:forEach var="day" items="${thisWeek}" varStatus="status">
              <fmt:formatDate value="${day}" var="dayString" pattern="yyyy-MM-dd" />
              <fmt:formatDate value="${currentDay}" var="currentDayString" pattern="yyyy-MM-dd" />
              <a href="${ctx.host}/profile/courses/${courseRound.id}/coaches/${coach.id}/appointment?site=${currentSite.id}&day=${dayString}&scheduleId=${param.scheduleId}" class="tab-item button ${currentDayString eq dayString ? 'active' : ''}">
                <small><fmt:formatDate value="${day}" pattern="EEEE" /></small>
                <br style="height: 0px;">
                <span class="day">
                  <fmt:formatDate value="${day}" pattern="MM月dd日" />
                </span>
              </a>            
            </c:forEach>
          </div>
            
          <div class="content-block appointment appointment-available" style="margin-top: .75rem;">
            <c:if test="${empty unavailable or !unavailable}">
              <c:forEach var="hour" begin="${appointStartTime[0]}" end="${appointEndTime[0]-1}">
                <c:set var="hourPerfix" value="${hour >= 10 ? '' : '0'}"> </c:set>
                <c:set var="afterhourPerfix" value="${hour+1 >= 10 ? '' : '0'}"> </c:set>
                <c:set var="dayhour" value="${currentDayString}|${hourPerfix}${hour}:00"/>
                <c:set var="halfhour" value="${currentDayString}|${hourPerfix}${hour}:30"/>
                <c:set var="afterdayhour" value="${currentDayString}|${hourPerfix}${hour + 1}:00"/>
                <c:set var="isEndHour" value="${hour == appointEndTime[0]-1 and appointEndTime[1] == 30}"/>
                <c:choose>
                  <c:when test="${today}">
                    <c:choose>
                      <c:when test="${hour == currentHour and currentMinute < 30 }">
                        <%@ include file="/WEB-INF/jsps/course/coach-appointment/appointment-half-hour-item.jsp" %>
                      </c:when>
                      <c:when test="${hour > currentHour}">
                        <c:choose>
                          <c:when test="${hour == appointStartTime[0] and appointStartTime[1] == '30'}">
                            <%@ include file="/WEB-INF/jsps/course/coach-appointment/appointment-half-hour-item.jsp" %>
                          </c:when>
                          <c:otherwise>
                            <%@ include file="/WEB-INF/jsps/course/coach-appointment/appointment-whole-hour-item.jsp" %>
                          </c:otherwise>
                        </c:choose>
                      </c:when>
                    </c:choose>
                  </c:when>
                  <c:otherwise>
                    <c:choose>
                      <c:when test="${hour == appointStartTime[0] and appointStartTime[1] == '30'}">
                        <%@ include file="/WEB-INF/jsps/course/coach-appointment/appointment-half-hour-item.jsp" %>
                      </c:when>
                      <c:otherwise>
                        <%@ include file="/WEB-INF/jsps/course/coach-appointment/appointment-whole-hour-item.jsp" %>
                      </c:otherwise>
                    </c:choose>
                  </c:otherwise>
                </c:choose>
              </c:forEach>
            </c:if>
          </div>
          <!-- <div class="submit-fixed clearfix hide" style="display: block;">
            <span class="date">2017/07/18</span>&nbsp;&nbsp;<span class="hour">10:30</span>
            <button id="submit" class="button button-fill"  style="float:right;background-color: #333; color: #FFDE00; display: inline-block;">确认</button>
          </div> -->
          <div class="submit-fixed clearfix hide" style="display: block;">
            <div class="area-type-select">
              <label class="common"><input type="radio" name="areaSelectType" value="common"/></label>
              <label class="room"><input type="radio" name="areaSelectType" value="room"/></label>
            </div>
            <div style="margin-top: .25rem;">
              <span class="date">2017/07/18</span>&nbsp;&nbsp;<span class="hour">10:30</span>
              <button id="submit" class="button button-fill"  style="float:right;background-color: #333; color: #FFDE00; display: none;">确认</button>
            </div>
          </div>
        </form>
      </div>
        
    </div>
  </div>
  
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/course/coach-appointment.js" />
  <script type="text/javascript">
    var jsConfig = JSON.parse('${wechatJsConfig}')
    require(['page/course/coach-appointment'], function(page) {
      page.init({
        jsConfig: jsConfig,
        'roundId': '${courseRound.id}',
        'fuxing': '${currentSite.fuxing}'
      })
    })
  </script>
  
</body>
</html>